<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.css" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis-network.min.js"> </script>
<center>
<h1></h1>
</center>

<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->

<style type="text/css">

        #mynetwork {
            width: 1000px;
            height: 1000px;
            background-color: #ffffff;
            border: 1px solid lightgray;
            position: relative;
            float: left;
        }

        

        

        
</style>

</head>

<body>
<div id = "mynetwork"></div>


<script type="text/javascript">

    // initialize global variables.
    var edges;
    var nodes;
    var network; 
    var container;
    var options, data;

    
    // This method is responsible for drawing the graph, returns the drawn network
    function drawGraph() {
        var container = document.getElementById('mynetwork');
        
        

        // parsing and collecting nodes and edges from the python
        nodes = new vis.DataSet([{"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "oil", "label": "oil", "shape": "dot", "size": 6}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "america", "label": "america", "shape": "dot", "size": 3}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "family", "label": "family", "shape": "dot", "size": 12}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "afghanistan", "label": "afghanistan", "shape": "dot", "size": 3}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "law", "label": "law", "shape": "dot", "size": 12}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "uniform", "label": "uniform", "shape": "dot", "size": 3}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "witness", "label": "witness", "shape": "dot", "size": 3}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "production", "label": "production", "shape": "dot", "size": 6}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "supply and demand", "label": "supply and demand", "shape": "dot", "size": 3}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "american", "label": "american", "shape": "dot", "size": 15}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "energy", "label": "energy", "shape": "dot", "size": 3}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "government", "label": "government", "shape": "dot", "size": 24}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "healthcare", "label": "healthcare", "shape": "dot", "size": 12}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "person", "label": "person", "shape": "dot", "size": 6}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "global warming", "label": "global warming", "shape": "dot", "size": 3}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "money", "label": "money", "shape": "dot", "size": 21}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "abortion", "label": "abortion", "shape": "dot", "size": 6}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "people", "label": "people", "shape": "dot", "size": 9}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "insurance", "label": "insurance", "shape": "dot", "size": 3}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "tax", "label": "tax", "shape": "dot", "size": 15}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "job", "label": "job", "shape": "dot", "size": 9}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "plan", "label": "plan", "shape": "dot", "size": 3}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "democrat", "label": "democrat", "shape": "dot", "size": 3}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "appointment", "label": "appointment", "shape": "dot", "size": 3}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "budget", "label": "budget", "shape": "dot", "size": 3}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "community", "label": "community", "shape": "dot", "size": 3}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "employee", "label": "employee", "shape": "dot", "size": 6}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "filibuster", "label": "filibuster", "shape": "dot", "size": 3}, {"color": "rgb(166, 187, 190, 0.7)", "hidden": false, "id": "(sick/paid/unpaid) leave", "label": "(sick/paid/unpaid) leave", "shape": "dot", "size": 3}]);
        edges = new vis.DataSet([{"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "oil", "hidden": false, "label": "account", "to": "america", "width": 8.333333333333334}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "family", "hidden": false, "label": "give", "to": "afghanistan", "width": 8.333333333333334}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "family", "hidden": false, "label": "keep", "to": "money", "width": 7.0}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "law", "hidden": false, "label": "authorize", "to": "uniform", "width": 8.333333333333334}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "law", "hidden": false, "label": "prescribed", "to": "witness", "width": 8.333333333333334}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "law", "hidden": false, "label": "authorize", "to": "appointment", "width": 4.0}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "production", "hidden": false, "label": "shut", "to": "supply and demand", "width": 8.333333333333334}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "production", "hidden": false, "label": "use", "to": "american", "width": 8.333333333333334}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "american", "hidden": false, "label": "rely", "to": "oil", "width": 8.0}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "american", "hidden": false, "label": "keep", "to": "money", "width": 7.333333333333333}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "american", "hidden": false, "label": "not-do", "to": "job", "width": 4.0}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "american", "hidden": false, "label": "work", "to": "government", "width": 1.3333333333333333}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "energy", "hidden": false, "label": "affect", "to": "family", "width": 8.333333333333334}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "government", "hidden": false, "label": "approve", "to": "healthcare", "width": 8.0}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "government", "hidden": false, "label": "control", "to": "healthcare", "width": 6.666666666666667}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "government", "hidden": false, "label": "run", "to": "healthcare", "width": 1.6666666666666667}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "government", "hidden": false, "label": "make", "to": "healthcare", "width": 0.6666666666666666}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "government", "hidden": false, "label": "run", "to": "insurance", "width": 5.666666666666667}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "government", "hidden": false, "label": "run", "to": "plan", "width": 5.0}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "government", "hidden": false, "label": "take", "to": "money", "width": 1.6666666666666667}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "person", "hidden": false, "label": "make", "to": "global warming", "width": 7.666666666666667}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "person", "hidden": false, "label": "love", "to": "family", "width": 2.0}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "money", "hidden": false, "label": "keep", "to": "money", "width": 6.333333333333333}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "money", "hidden": false, "label": "fund", "to": "abortion", "width": 6.333333333333333}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "people", "hidden": false, "label": "keep", "to": "money", "width": 6.0}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "people", "hidden": false, "label": "call", "to": "tax", "width": 5.333333333333333}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "people", "hidden": false, "label": "broken", "to": "law", "width": 1.3333333333333333}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "tax", "hidden": false, "label": "kill", "to": "job", "width": 5.333333333333333}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "democrat", "hidden": false, "label": "raise", "to": "tax", "width": 4.333333333333333}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "budget", "hidden": false, "label": "increase", "to": "tax", "width": 2.6666666666666665}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "community", "hidden": false, "label": "promote", "to": "abortion", "width": 2.3333333333333335}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "employee", "hidden": false, "label": "create", "to": "job", "width": 0.6666666666666666}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "employee", "hidden": false, "label": "take", "to": "(sick/paid/unpaid) leave", "width": 0.3333333333333333}, {"arrows": "to", "color": "rgba(187, 44, 44, 0.7)", "from": "filibuster", "hidden": false, "label": "raise", "to": "tax", "width": 0.3333333333333333}]);

        // adding nodes and edges to the graph
        data = {nodes: nodes, edges: edges};

        var options = {"nodes": {"font": {"size": 20}}, "edges": {"color": {"inherit": true}, "font": {"size": 20}, "smooth": {"forceDirection": "none"}}, "physics": {"barnesHut": {"centralGravity": 0.5, "springLength": 100, "springConstant": 0.05, "avoidOverlap": 0.1}, "minVelocity": 0.75}};
        
        

        

        network = new vis.Network(container, data, options);
	 
        


        

        return network;

    }

    drawGraph();

</script>
</body>
</html>